<template>
    <div class="side-bar" :class="{ 'mobile-collapsed': isMobile && !isExpanded }">
        <!-- 移动端折叠按钮 -->
        <div v-if="isMobile" class="mobile-toggle" @click="toggleSidebar">
            <Icon :name="isExpanded ? 'xiangzuo' : 'xiangyou1'" :size="16" />
        </div>

        <div class="title">推荐</div>
        <ul>
            <li
                v-for="item in recommendList"
                :key="item.name"
                :class="{ 'active-item': activeMenuitem === item.name }"
                @click="clickSidebar(item.name)"
            >
                <Icon :name="item.icon" :size="16" />
                <span>{{ item.title }}</span>
            </li>
        </ul>

        <div class="title">我的音乐</div>
        <ul>
            <li
                v-for="item in myMusicList"
                :key="item.name"
                :class="{ 'active-item': activeMenuitem === item.name }"
                @click="clickSidebar(item.name)"
            >
                <Icon :name="item.icon" :size="16" />
                <span>{{ item.title }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { useSidebarStore } from '@/store/sidebar';

// 定义菜单项类型
interface MenuItem {
    title: string;
    name: string;
    icon: string;
}

// 菜单项数据（静态数据可移至外部模块）
const recommendList: MenuItem[] = [
    { title: '发现音乐', name: 'PagesRecommendFindMusicIndex', icon: 'yinle' },
    { title: '歌手', name: 'PagesRecommendSingerIndex', icon: 'changge' },
    { title: '私人FM', name: '', icon: 'diantai' },
    { title: '视频', name: '', icon: 'shipinbofang' },
    { title: '动态', name: '', icon: 'dongtai' },
];

const myMusicList: MenuItem[] = [
    { title: '本地音乐', name: '', icon: 'yinle1' },
    { title: '下载管理', name: '', icon: 'xiazaidaoru' },
    { title: '我的音乐云盘', name: '', icon: 'yunpan' },
    { title: '我的收藏', name: '', icon: 'shoucang' },
];

// 初始化store
const sidebarStore = useSidebarStore();
const router = useRouter();

// 响应式状态（从store获取）
const isExpanded = computed(() => sidebarStore.isExpanded);
const isMobile = computed(() => sidebarStore.isMobile);
const activeMenuitem = ref('PagesRecommendFindMusicIndex');

// 方法
const toggleSidebar = () => sidebarStore.toggleSidebar();

// 点击菜单项方法
const clickSidebar = (name: string) => {
    activeMenuitem.value = name;
    router.push({name});

    // 移动端点击后自动收起
    if (isMobile.value) {
        sidebarStore.isExpanded = false;
    }
};

// 当设备类型变化时自动调整侧边栏状态
watchEffect(() => {
    if (isMobile.value) {
        // 移动端默认折叠
        sidebarStore.isExpanded = false;
    } else {
        // 桌面端默认展开
        sidebarStore.isExpanded = true;
    }
});
</script>

<style lang="scss" scoped>
// 基础样式
.side-bar {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #f0f2f5;
    border-right: 1px solid #d3d3d3;
    transition: width 0.3s ease;
    overflow: hidden;

    // 移动端折叠状态
    &.mobile-collapsed {
        width: 50px;

        .title,
        span {
            display: none;
        }

        li {
            padding-left: 15px;
        }
    }
}

// 移动端折叠按钮
.mobile-toggle {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #d3d3d3;
    cursor: pointer;

    .iconfont {
        color: #1c1c1c;
    }
}

// 菜单项样式
ul, li {
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
    padding-left: 25px;
    height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-left: 2px solid #f0f2f5;
    cursor: pointer;
    transition: all 0.2s;

    i {
        color: #1c1c1c;
        width: 20px;
        text-align: center;
    }

    span {
        font-size: 14px;
        margin-left: 6px;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    &:hover {
        background-color: #e6e6e6;
        font-weight: bold;
        border-left: 2px solid #ec4141;
    }
}

.active-item {
    background-color: #e6e6e6;
    font-weight: bold;
    border-left: 2px solid #ec4141;
}

.title {
    color: #8485c0;
    font-weight: 100;
    letter-spacing: 1px;
    height: 30px;
    line-height: 30px;
    margin-left: 15px;
    white-space: nowrap;

    &:first-child {
        margin-top: 10px;
    }
}

// 仅在移动端显示折叠按钮
@media (min-width: 768px) {
    .mobile-toggle {
        display: none;
    }
}
</style>